<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="订单号" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="保险类型" label-width="100px">
              <el-select v-model="tableSearchParam.insuranceClassifyId" clearable style="width:200px">
                <el-option
                  v-for="item in allInsuranceClassify"
                  :value="item.id"
                  :key="item.id"
                  :label="item.insuranceClassifyName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="保单号" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="投保人" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderCustomerName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="投保人手机" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderCuestomTelphone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="出单人" label-width="100px">
              <el-input v-model="tableSearchParam.driverName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="出单救援公司" label-width="100px">
              <el-input v-model="tableSearchParam.companyName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="合法性" label-width="100px">
              <el-select v-model="tableSearchParam.insuranceValided" clearable style="width: 200px">
                <el-option value="1" key="1" label="合法"></el-option>
                <el-option value="0" key="0" label="违规"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="购买流程" label-width="100px">
              <el-select v-model="tableSearchParam.insuranceOrderStatus" clearable style="width: 200px">
                <el-option value="0" key="0" label="待支付"></el-option>
                <el-option value="1" key="1" label="订单待确认"></el-option>
                <el-option value="2" key="2" label="订单已取消"></el-option>
                <el-option value="3" key="3" label="订单已过期"></el-option>
                <el-option value="4" key="4" label="订单有效期"></el-option>
                <el-option value="5" key="5" label="订单未通过"></el-option>
                <el-option value="6" key="6" label="出险处理中"></el-option>
                <el-option value="7" key="7" label="赔付中止"></el-option>
                <el-option value="8" key="8" label="订单完成"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="执行流程" label-width="100px">
              <el-select v-model="tableSearchParam.insuranceOrderExecuteStatus" clearable style="width: 200px">
                <el-option value="0" key="0" label="待支付"></el-option>
                <el-option value="1" key="1" label="订单待确认"></el-option>
                <el-option value="2" key="2" label="订单已取消"></el-option>
                <el-option value="3" key="3" label="订单已过期"></el-option>
                <el-option value="4" key="4" label="订单有效期"></el-option>
                <el-option value="5" key="5" label="订单未通过"></el-option>
                <el-option value="6" key="6" label="出险处理中"></el-option>
                <el-option value="7" key="7" label="赔付中止"></el-option>
                <el-option value="8" key="8" label="订单完成"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          default-expand-all
          v-loading="tableLoading">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="保险类型:" label-width="110px">
                      <span>{{ props.row.insuranceClassifyName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="保险产品:" label-width="110px">
                      <span>{{ props.row.insuranceName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="购买流程:" label-width="110px">
                      <el-tag v-if="props.row.insuranceOrderStatus!=null && props.row.insuranceOrderStatus!=''"
                              :type="convertOrderProcessStatus(props.row.insuranceOrderStatus)[0]">
                        {{convertOrderProcessStatus(props.row.insuranceOrderStatus)[1]}}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="出单救援公司:" label-width="110px">
                      <span>{{ props.row.companyName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="出单人:" label-width="110px">
                      <span>{{ props.row.driverName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="出单人手机:" label-width="110px">
                      <span>{{ props.row.driverTelphone }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="合法性:" label-width="110px">
                      <el-tag v-if="props.row.insuranceValided!=null && props.row.insuranceValided!=''"
                              :type="convertValidStatus(props.row.insuranceValided)[0]">
                        {{convertValidStatus(props.row.insuranceValided)[1]}}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="执行流程:" label-width="110px">
                      <el-tag v-if="props.row.insuranceOrderStatus!=null && props.row.insuranceOrderStatus!=''"
                              :type="convertOrderProcessStatus(props.row.insuranceOrderStatus)[0]">
                        {{convertOrderProcessStatus(props.row.insuranceOrderStatus)[1]}}
                      </el-tag>
                      <!--<el-tag-->
                      <!--v-if="props.row.insuranceOrderExecuteStatus!=null && props.row.insuranceOrderExecuteStatus!=''"-->
                      <!--:type="convertOrdErexecuteStatus(props.row.insuranceOrderExecuteStatus)[0]">-->
                      <!--{{convertOrdErexecuteStatus(props.row.insuranceOrderExecuteStatus)[1]}}-->
                      <!--</el-tag>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="props.row.insuranceClassifyId=='21be70cd31a547c38bfc09552a71db08'">
                  <el-col :span="10">
                    <el-form-item label="开始时间:" label-width="110px">
                      <span style="white-space: nowrap;">{{props.row.effectiveDate}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="结束时间:" label-width="110px">
                      <span style="white-space: nowrap;">{{props.row.expiresDate}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            label="订单号"
            property="insuranceOrderNo"
            width="110">
          </el-table-column>
          <el-table-column
            label="保单号"
            property="insuranceNo"
            width="350">
          </el-table-column>
          <el-table-column
            label="保费"
            property="insuranceOrderAmount"
            width="50">
          </el-table-column>
          <el-table-column
            label="投保人"
            property="insuranceOrderCustomerName"
            width="100">
          </el-table-column>
          <el-table-column
            label="投保人手机"
            property="insuranceOrderCuestomTelphone"
            width="125">
          </el-table-column>
          <el-table-column
            label="现场图片"
            width="125">
            <template slot-scope="scope">
              <el-button
                @click="viewImages(scope.row.carFrontSideImgs,scope.row.carBackSideImgs,scope.row.userCarImgs)">查看图片
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="提单时间"
            property="createdTime"
            width="150">
          </el-table-column>
          <el-table-column label="操作" width="270">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-view"
                type="primary"
                @click="viewData(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-check"
                type="success"
                @click="handValidOrder(scope.$index, scope.row)">合法
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-close"
                type="danger"
                @click="handleNoValidOrder(scope.$index, scope.row)">违规
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <div style="height:500px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">订单号</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.insuranceOrderNo}}</el-col>
          <el-col :span="4" class="m-col-left">出单救援公司</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.companyName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">出单人</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.driverName}}</el-col>
          <el-col :span="4" class="m-col-left">出单人手机</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.driverTelphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">投保人</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.insuranceOrderCustomerName}}</el-col>
          <el-col :span="4" class="m-col-left">投保人手机</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.insuranceOrderCuestomTelphone}}</el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='21be70cd31a547c38bfc09552a71db08'">
          <el-col :span="4" class="m-col">紧急联系人</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.emergencyContactPerson}}</el-col>
          <el-col :span="4" class="m-col-left">紧急联系人手机</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.emergencyContactNumber}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保单号</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tooltip :content="insuranceOrderData.insuranceNo" placement="bottom" effect="light">
              <span class="desc">{{insuranceOrderData.insuranceNo}}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="4" class="m-col-left">投保产品</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.insuranceName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保费</el-col>
          <el-col :span="20" class="m-col-left">{{insuranceOrderData.insuranceOrderAmount}}</el-col>
          <!--<el-col :span="4" class="m-col-left">合法性</el-col>-->
          <!--<el-col :span="8" class="m-col-left">-->
            <!--<el-tag v-if="insuranceOrderData.insuranceValided!=null && insuranceOrderData.insuranceValided!=''"-->
                    <!--:type="convertValidStatus(insuranceOrderData.insuranceValided)[0]">-->
              <!--{{convertValidStatus(insuranceOrderData.insuranceValided)[1]}}-->
            <!--</el-tag>-->
          <!--</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">购买流程</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="insuranceOrderData.insuranceOrderStatus!=null && insuranceOrderData.insuranceOrderStatus!=''"
                    :type="convertOrderProcessStatus(insuranceOrderData.insuranceOrderStatus)[0]">
              {{convertOrderProcessStatus(insuranceOrderData.insuranceOrderStatus)[1]}}
            </el-tag>
          </el-col>
          <el-col :span="4" class="m-col-left">执行流程</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="insuranceOrderData.insuranceOrderStatus!=null && insuranceOrderData.insuranceOrderStatus!=''"
                    :type="convertOrderProcessStatus(insuranceOrderData.insuranceOrderStatus)[0]">
              {{convertOrderProcessStatus(insuranceOrderData.insuranceOrderStatus)[1]}}
            </el-tag>
            <!--<el-tag-->
            <!--v-if="insuranceOrderData.insuranceOrderExecuteStatus!=null && insuranceOrderData.insuranceOrderExecuteStatus!=''"-->
            <!--:type="convertOrdErexecuteStatus(insuranceOrderData.insuranceOrderExecuteStatus)[0]">-->
            <!--{{convertOrdErexecuteStatus(insuranceOrderData.insuranceOrderExecuteStatus)[1]}}-->
            <!--</el-tag>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">违规原因</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.insuranceValidedDesc}}</el-col>
          <el-col :span="4" class="m-col-left">提单时间</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.createdTime}}</el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='21be70cd31a547c38bfc09552a71db08'">
          <el-col :span="4" class="m-col">开始时间</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.effectiveDate}}</el-col>
          <el-col :span="4" class="m-col-left">结束时间</el-col>
          <el-col :span="8" class="m-col-left">{{insuranceOrderData.expiresDate}}</el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='8b14ef2abd544815a5ed45133b489ebb'">
          <el-col :span="4" class="m-col-bottom">车架号</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  insuranceOrderData.carNumberImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='8b14ef2abd544815a5ed45133b489ebb'">
          <el-col :span="4" class="m-col-bottom">左前或右前45度照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  insuranceOrderData.carFrontSideImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='8b14ef2abd544815a5ed45133b489ebb'">
          <el-col :span="4" class="m-col-bottom">左后或右后45度照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  insuranceOrderData.carBackSideImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='e7cec11e64a7459e8d096a706458d1f8'">
          <el-col :span="4" class="m-col-bottom">身份证或驾驶证照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  insuranceOrderData.userLecenceImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="insuranceOrderData.insuranceClassifyId=='e7cec11e64a7459e8d096a706458d1f8'">
          <el-col :span="4" class="m-col-bottom">人与车合照照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  insuranceOrderData.userCarImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="违规原因" :visible.sync="dialogWeiguiFormVisible" top="2vh" width="70%">
      <el-form :model="noValidData">
        <el-form-item label="违规原因" label-width="70px" prop="auditDesc">
          <el-input type="textarea" v-model="noValidData.insuranceValidedDesc" auto-complete="off" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogWeiguiFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmValidOrder">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="现场图片" :visible.sync="dialogTupianFormVisible" top="5vh">
      <div style="height:300px">
        <div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>
        <div v-for="(item,index) in  images" v-if="images.length != 0">
          <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
               @click="showImg1(item.url,index)">
            <img :src="baseUrl+item.url"
                 style="width:100%;height:100%;"></img>
          </div>
        </div>
      </div>
      <!--<div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>-->
      <!--<div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}-->
      <!--</div>-->
      <!--<el-carousel height="250px" @change="orderImagesChange" :autoplay="false" v-if="images.length != 0">-->
      <!--<el-carousel-item v-for="item in imgUrl" :key="item.url">-->
      <!--<img :src="item" width="100%">-->
      <!--</el-carousel-item>-->
      <!--</el-carousel>-->
      <!--<br/>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照地点：{{images.length != 0 ? images[imgIndex].takeAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传地点：{{images.length != 0 ? images[imgIndex].uploadAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible1" top="10vh">

      <div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}
      </div>
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img
          :src="baseUrl+imgUrlaa1"
          style="width: 80%;height: auto">
      </div>

      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">执照地点：{{images.length != 0 ? images[imgIndex].takeAddress : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传地点：{{images.length != 0 ? images[imgIndex].uploadAddress : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .viewImg {
    text-align: center
  }

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .desc {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
</style>

<script>

  import insuranceOrderApi from '@/api/insuranceOrderApi'
  import insuranceClassifyApi from '@/api/insuranceClassifyApi'

  export default {
    created() {
      this.listAllInsuranceClassify()
      this.listTableData()
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        roteVal: 0,
        allInsuranceClassify: [],
        tableLoading: true,
        dialogTupianFormVisible: false,
        dialogWeiguiFormVisible: false,
        dialogFormVisible: false,
        tableSearchParam: {
          insuranceClassifyId: '',
          insuranceName: '',
          publicStatus: ''
        },
        insuranceOrderData: {},
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
        noValidData: {
          id: '',
          insuranceValided: '',
          insuranceValidedDesc: ''
        },
        multipleSelection: [],
        images: [],
        imgUrl: [],
        imgIndex: '0',
        dialogImgFormVisible: false,
        imgUrlaa: '',
        imgUrlaa1: '',
        dialogImgFormVisible1: false,
      }
    },
    methods: {
      roteImg() {
        this.roteVal += 90
      },
      listAllInsuranceClassify() {
        insuranceClassifyApi.listAll((res) => {
          this.allInsuranceClassify = res
        }, () => {
        })
      },
      showImg(url) {
        this.roteVal = 0
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      showImg1(url, index) {
        this.roteVal = 0
        this.dialogImgFormVisible1 = true
        this.imgUrlaa1 = url
        this.imgIndex = index
      },
      viewImages(carFrontSideImgs, carBackSideImgs, userCarImgs) {
        this.imgUrl = []
        this.images = []
        for (var uc of userCarImgs) {
          uc.title = '车架号照片'
          this.imgUrl.push(uc.url)
          this.images.push(uc)
        }
        for (var cfs of carFrontSideImgs) {
          cfs.title = '左前或右前45度照片'
          this.imgUrl.push(cfs.url)
          this.images.push(cfs)
        }
        for (var cbs of carBackSideImgs) {
          cbs.title = '左后或右右45度照片'
          this.imgUrl.push(cbs.url)
          this.images.push(cbs)
        }
        this.dialogTupianFormVisible = true
      },
      orderImagesChange(index, oldIndex) {
        this.imgIndex = index
      },
      listTableData() {
        this.tableLoading = true
        insuranceOrderApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      viewData(index, row) {
        insuranceOrderApi.get(row.id, (res) => {
          this.insuranceOrderData = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
      handValidOrder(index, row) {
        this.noValidData = {
          id: row.id,
          insuranceValided: '1',
          insuranceValidedDesc: ''
        }
        insuranceOrderApi.handleOrderValid(this.noValidData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.listTableData()
        }, () => {
        })
      },
      handleNoValidOrder(index, row) {
        this.dialogWeiguiFormVisible = true
        this.noValidData.id = row.id
      },
      confirmValidOrder() {
        this.noValidData.insuranceValided = '0'
        insuranceOrderApi.handleOrderValid(this.noValidData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogWeiguiFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          insuranceOrderApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      convertValidStatus(validStatus) {
        let convertRet = []
        switch (validStatus) {
          case '0':
            convertRet[0] = 'danger'
            convertRet[1] = '违规'
            break
          case '1':
            convertRet[0] = 'success'
            convertRet[1] = '合法'
            break
        }
        return convertRet
      },
      convertOrderProcessStatus(orderProcessStatus) {
        let convertRet = []
        switch (orderProcessStatus) {
          case '0':
            convertRet[0] = 'success'
            convertRet[1] = '待支付'
            break
          case '1':
            convertRet[0] = 'success'
            convertRet[1] = '订单待确认'
            break
          case '2':
            convertRet[0] = 'success'
            convertRet[1] = '订单已取消'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '订单已过期'
            break
          case '4':
            convertRet[0] = 'success'
            convertRet[1] = '订单有效期'
            break
          case '5':
            convertRet[0] = 'success'
            convertRet[1] = '订单未通过'
            break
          case '6':
            convertRet[0] = 'success'
            convertRet[1] = '出险处理中'
            break
          case '7':
            convertRet[0] = 'info'
            convertRet[1] = '赔付中止'
            break
          case '8':
            convertRet[0] = 'warning'
            convertRet[1] = '订单完成'
            break
        }
        return convertRet
      },
      convertOrdErexecuteStatus(orderErexecuteStatus) {
        let convertRet = []
        switch (orderErexecuteStatus) {
          case '1':
            convertRet[0] = ''
            convertRet[1] = '有效期间'
            break
          case '2':
            convertRet[0] = 'warning'
            convertRet[1] = '出险处理'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '正常中止'
            break
          case '4':
            convertRet[0] = 'info'
            convertRet[1] = '已赔付中止'
            break
        }
        return convertRet
      }
    }
  }

</script>
